<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

    .parent{
      border: 1px solid green;
      width: 350px;
    }
    .son1,.son2,.son3{
      width: 100px;
      height: 100px;
      /*display: inline-block;  !*可以改变元素的状态  块元素和行内元素的转换*!*/
    }

    .son1{
      border: 1px solid red;
      /*float: left;*/
      float: right;
      /*display: none;   !*隐藏一个元素  脱离文档流*!*/
    }

    .son3{
      border: 1px solid yellowgreen;
      float: left;
      /*float: right;*/
    }

    .son2{
        border: 1px solid orange;
        float: left;
        /*float: right;*/
        /*margin-left: 120px;*/
        /*margin-top: 100px;*/
        /*margin-right: 20px;*/
    }
  </style>

</head>
<body>

<!--
    元素浮动  改变元素的默认排列方式
    float   left  right
     元素一旦浮动 则会脱离文档流  原有的位置会被释放

-->

<div class="parent">
  <div class="son1">1</div>
  <div class="son2">2</div>
  <div class="son3">3</div>
</div>


</body>
</html>